<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmchart.debug.js" id="jmgraph" ></script>-->

		<style>
		html,body {
			margin:0;
			padding:0;
			width:100%;
			height:100%;
		}
        #mycanvas {
            text-align: center;
            margin-top: 10px;
        }
		#mycanvas canvas, #mycanvas div{
			background-color:#fff;
			margin:0 auto;		
		}
		/*div.jm-tooltip {
			background-color: rgba(255,255,255,0.8);
			padding:4px;
			border:1px solid #000;
			box-shadow: 0 0 3px #000;
			border-radius: 6px;
		}*/
		</style>
		<script type="module">
			import jmChart from '../dist/jmchart.esm.js';
			(function load() {
				var w = Math.max((window.innerWidth || window.document.body.clientWidth) * 0.8, 500);
				var h = Math.min((window.innerHeight || window.document.body.clientHeight) * 0.5, 500);			
				inichart(w,h);
			})();
			

			function inichart(w, h) {

                    const datacount = 50;

					const chart = new jmChart('mycanvas', {
						width: w,
						height: h,
                        xField: 'x',
                        enableAnimate: true,
                        legendPosition: 'top',
                        legendVisible: false, // 不显示图例
						// 最大和最小X值，  这里一般不用指定，除非硬是需要
						minXValue : 0,
						maxXValue : 10,
						//minYValue: -100,
						//maxYValue: 400,
                        // 格式化x标签值
                        xLabelFormat: (v, item, index) => {
                            // 只展示第一个和最后一个
                            if(index % 5 === 0) {
                                return v;
                            }  
                            return '';
                        },
                        style: {
							// 跟随标线
							markLine: {
								x: false, // 显示X标线
								y: true, // 显示Y标线
								stroke: 'red',
								fill: '#fff',
								lineWidth: 1,
							},
                            // x轴 Y轴隐藏
                            axis: {
								stroke: 'transparent',
								align: 'center', // label居中对齐
                                grid: {
                                    x: false,  // 不显示X轴网格
                                    y: true     // 显示Y轴网格
                                }
                            },
                            // 隐藏边框
                            chartArea: {
                                stroke: 'transparent'
                            },
                            margin: {
                                top: 30,
                                left: 50,
                                right: 10,
                                bottom: 30
                            }
                        }
					});				

					const line = chart.createSeries('stackLine', {
						fields: [
							'y1', 'y2'
						],
						//index: 2, // 指定Y轴索引，如是档指定就会共用左边的Y轴，  
						legendLabel: '图例2',
						
                        // 格式化x轴标签值
                        yLabelFormat: (v) => {
                            return v.toFixed? (v.toFixed(0) + '%') : v;
                        },
                        style: {
                            // 不显示小圆点
							showItem: false,
							color: '#F7BB98',													
							// 填充图形
							area: {
								fill: function(style) {
									return this.style.color;
								},
								shadow: function() {								
									return `0, 0, 20, #000`;
								},	
							}
                        }
					});
					
					
					function animate() {
                        chart.data = [];
                        for(var i = 0;i<datacount;i++) {
                            const d = {
                                x : '0909' + i,
                                y1 :  i * 2 + Math.random() * 10,
                                y2:  i * 3 + Math.random() * 10
                            };
                            
                            chart.data.push(d);
                        }
						
						//setTimeout(animate,500);
						chart.refresh();
						console.log(chart.data);
					}
					
					animate();
				}
		</script>
	</head>
	<body>
		<div id="mycanvas">
			</div>	
	</body>
</html>